<template>
  <div id="app">
    <div class="page">
      <transition :name="transitionName">
        <router-view />
      </transition>
    </div>
    <Footer />
  </div>
</template>

<script>
import Footer from "./components/footer/index";
import webSocket from "./components/utlis/webSocket";
export default {
  name: "App",
  data() {
    return {
      transitionName: "" // 动画名称
    };
  },
  components: {
    Footer
  },
  mounted() {
    // 每次刷新重新登录一遍
    window.onload = () => {
      // 判断有没有登录
      if (JSON.parse(localStorage.getItem("token"))) {
        // 登录了
        // 重新连线服务器
        webSocket.send(
          JSON.stringify({
            // type值如果为login 表示需要等路由就保存当前账户
            type: "login",
            // 发送者的名字
            uid: JSON.parse(localStorage.getItem("token")).uid
          })
        );
      } else {
        return;
      }
    };
  },
  watch: {
    // 使用watch监听$router的变化
    $route(to, from) {
      // 如果to的索引大于from索引，判断为前进状态，反之则为后退状态
      if (to.meta.shopIndex > from.meta.shopIndex) {
        this.transitionName = "slide-left";
      } else {
        this.transitionName = "slide-right";
      }
    }
  }
};
</script>

<style>
@import url("./app.css");

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 300ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}EE
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
#app {
  width: 100%;
  height: 100%;
}
.page {
  width: 100%;
  height: calc(100% - 50px);
  background: #fff;
}
.fromgoup .van-field .van-field__label {
  width: auto;
  padding-right: 10px;
  border-right: 1px solid #ccc;
  color: #000;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.van-cell__title {
  width: 60px;
  margin-right: 10px;
}
.van-cell--required {
  border-bottom: 1px solid #000;
}

.van-uploader__upload {
  height: 17px;
  width: 120px;
  top: 150px;
  z-index: 1;
  /* display: none; */
  background: rgba(0, 0, 0, 0);
}
.van-uploader__upload-icon {
  color: rgba(0, 0, 0, 0);
}
.van-dropdown-menu__bar {
  box-shadow: 0 0 0 0#fff;
}
</style>
